﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
            
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客文章评论管理</title>

    <script src="~/lib/axios.js"></script>
    <script src="~/lib/vue.js"></script>

    <style>
        .comment {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            margin: 0 auto;
        }


        .hide {
            display: none;
        }

        .modal {
            /* 上左定位50%后 上左margin-高度和宽度的一半保证div在中心位置 */
            position: fixed;
            left: 50%;
            top: 50%;
            width: 700px;
            height: 700px;
            margin-left: -350px;
            margin-top: -350px;
            z-index: 10;
            background-color: #ffff;
        }

        .shade {
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }

        .Huiform {
            margin-top: 80px;
        }

        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }

            table td, table th {
                border: 1px solid #cad9ea;
                color: #666;
                height: 30px;
            }

            table thead th {
                background-color: #CCE8EB;
                width: 100px;
            }

            table tr:nth-child(odd) {
                background: #fff;
            }

            table tr:nth-child(even) {
                background: #F5FAFA;
            }

        .text-c {
            color: rgb(144, 147, 153);
            z-index: 1;
        }

        #bannerTable {
            width: 100%;
        }

        #text-k {
            color: #606266;
        }

            #text-k:hover {
                background-color: antiquewhite;
            }
        /* a链接去除下划线*/
        a {
            text-decoration: none;
        }
    </style>

</head>

<body>
    <div class="comment">


        <br /><br />  <br />  <br />
        <table id="bannerTable">
            <thead>
                <tr class="text-c">
                    <th width="80">ID</th>
                    <th width="400">博客文章标题</th>
                    <th>评论内容</th>
                    <th width="130">评论时间</th>
                    <th width="200">备注</th>
                    <th width="60">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr id="text-k" v-for=" item  in CoommentList" :key="item.newsId">
                    <td>{{item.newsCommentId }}</td>
                    <td>{{item.newsTitle}}</td>
                    <td>{{item.newsCommentContent}}</td>
                    <td>{{item.createDate}}</td>
                    <td>这是一个用户评论</td>
                    <td class="f-14"><a href="javascript:;" v-on:click=" delectComment(item.newsCommentId )">删除</a></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>
<script>
    var app = new Vue({

        el: '.comment',
        data: {
        CoommentList:[]

        },


        mounted() {
            axios({
                method: 'Get',
                url: '/admin/GetCommentModel'

            }).then(res => {
     
                console.log(res);
                this.CoommentList = res.data.data;
                console.log(this.CoommentList);

            }).catch(err => {
                console.log(err);
            }

            )

        },
        methods: {
            delectComment(e) {

         

                axios.post('/admin/DelectComment', {
                    NewsCommentId:e

                }).then(res => {
                    console.log(res);
                    if (res.data.code = 200) {
                        alert("删除成功");
                        this.Reload();
                    }

                }).catch(err => {
                    console.log(err);
                });

            },
            reload() {
                location.reload();

            },
            

            Reload() {

                axios({
                    method: 'Get',
                    url: '/admin/GetCommentModel'

                }).then(res => {
                    console.log(res);
                    this.CoommentList = res.data.data;
                    console.log(this.CoommentList);

                }).catch(err => {
                    console.log(err);
                }

                )

            }

        }



    });
</script>